<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="qwebchannel.js"></script>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/map/js/china.js"></script>
</head>

<body>
    <div id='main' style="width: 1200px;height:800px;margin:100px auto;"></div>
    <script>
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // echarts.registerMap('HK', geoJson);
        // 指定图表的配置项和数据
        var option = {
            toolbox: {
                feature: {
                    dataView: {},
                    restore: {},
                    saveAsImage: {}
                }
            },
            visualMap: {
                type: "piecewise",
                dimension: 0,
                pieces: [
                    { gte: 10000, label: '>10000', color: 'rgba(143, 2, 45,1)' },
                    { gte: 1000, lte: 9999, label: '1000~9999', color: 'rgba(143, 2, 45,0.6)' },
                    { gte: 100, lte: 999, label: '100~999', color: 'rgba(143, 2, 45,0.4)' },
                    { gte: 10, lte: 99, label: '10~99', color: 'rgba(143, 2, 45,0.2)' },
                    { lt: 10, label: '<10', color: 'rgba(143, 2, 45,0.1)' },
                ]

            },
            tooltip: {
                formatter: ({ marker, name, data }) => {
                    let str = `
                    <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;
                    background-color:#ada;"></span>
                    `
                    let str1 = `
                    <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;
                    background-color:#add;"></span>
                    `
                    let str2 = `
                    <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;
                    background-color:#dda;"></span>
                    `
                    if (data) {
                        let { value } = data
                        if (!value)
                            return name + '<br>暂无数据'
                        return `${name}
                    <br>${marker}确诊${value[0]}例
                    <br>${str}疑似${value[1]}例
                    <br>${str1}治愈${value[2]}例
                    <br>${str2}死亡${value[3]}例`
                    }

                    return name + '<br>暂无数据'
                },
                textStyle: {
                    fontSize: 12
                }
            },
            title: {
                link: "https://news.163.com/special/epidemic",
                left: 'center',
                top: 20,
                textStyle: {
                    fontSize: 24
                }
            },
            series: [
                {
                    zoom: 1.1,
                    name: "数据",
                    map: 'china',
                    type: 'map'
                }]
        };

        myChart.setOption(option);

        var updateData = function (chinaDailyData, updateTime) {
            let todayArrry = JSON.parse(chinaDailyData);
            option.series[0].data = todayArrry;
            option.title.text = "全国疫情分省数据图(数据来源：网易，最后更新时间：" + updateTime + ")";

            myChart.setOption(option);
        }

        window.onresize = function(){
            myChart.resize();
        };

        new QWebChannel(qt.webChannelTransport,
            function (channel) {
                var webObject = channel.objects.webObject;
                window.webObject = webObject;
                window.webObject.setData.connect(updateData);
                window.webObject.pageLoadFinished();
            });
    </script>
</body>

</html>